<template>
    <a-spin style="display: block" :loading="loading">
        <a-tabs v-model:activeKey="messageType" type="rounded" destroy-on-hide>
            <a-tab-pane v-for="item in tabList" :key="item.key">
                <template #title>
                    <span>
                        {{ item.title }}{{ formatUnreadLength(item.key) }}
                    </span>
                </template>
                <a-result v-if="!renderList.length" status="404">
                    <template #subtitle>
                        {{ $t('messageBox.noContent') }}
                    </template>
                </a-result>
                <List
                    :render-list="renderList"
                    :unread-count="unreadCount"
                    @item-click="handleItemClick"
                />
            </a-tab-pane>
            <template #extra>
                <a-button type="text" @click="emptyList">
                    {{ $t('messageBox.tab.button') }}
                </a-button>
            </template>
        </a-tabs>
    </a-spin>
</template>

<script lang="ts" setup>
    import { ref, reactive, toRefs, computed } from 'vue';
    import { useI18n } from 'vue-i18n';
    import {
        queryMessageList,
        setMessageStatus,
        MessageRecord,
        MessageListType,
    } from '@/api/message';
    import useLoading from '@/hooks/loading';
    import List from './list.vue';

    interface TabItem {
        key: string;
        title: string;
        avatar?: string;
    }
    const { loading, setLoading } = useLoading(true);
    const messageType = ref('message');
    const { t } = useI18n();
    const messageData = reactive<{
        renderList: MessageRecord[];
        messageList: MessageRecord[];
    }>({
        renderList: [],
        messageList: [],
    });
    toRefs(messageData);
    const tabList: TabItem[] = [
        {
            key: 'message',
            title: t('messageBox.tab.title.message'),
        },
        {
            key: 'notice',
            title: t('messageBox.tab.title.notice'),
        },
        {
            key: 'todo',
            title: t('messageBox.tab.title.todo'),
        },
    ];
    async function fetchSourceData() {
        setLoading(true);
        try {
            const { data } = await queryMessageList();
            messageData.messageList = data;
        } catch (err) {
            // you can report use errorHandler or other
        } finally {
            setLoading(false);
        }
    }
    async function readMessage(data: MessageListType) {
        const ids = data.map((item) => item.id);
        await setMessageStatus({ ids });
        fetchSourceData();
    }
    const renderList = computed(() => {
        return messageData.messageList.filter(
            (item) => messageType.value === item.type
        );
    });
    const unreadCount = computed(() => {
        return renderList.value.filter((item) => !item.status).length;
    });
    const getUnreadList = (type: string) => {
        const list = messageData.messageList.filter(
            (item) => item.type === type && !item.status
        );
        return list;
    };
    const formatUnreadLength = (type: string) => {
        const list = getUnreadList(type);
        return list.length ? `(${list.length})` : ``;
    };
    const handleItemClick = (items: MessageListType) => {
        if (renderList.value.length) readMessage([...items]);
    };
    const emptyList = () => {
        messageData.messageList = [];
    };
    fetchSourceData();
</script>

<style scoped lang="less">
    :deep(.arco-popover-popup-content) {
        padding: 0;
    }

    :deep(.arco-list-item-meta) {
        align-items: flex-start;
    }
    :deep(.arco-tabs-nav) {
        padding: 14px 0 12px 16px;
        border-bottom: 1px solid var(--color-neutral-3);
    }
    :deep(.arco-tabs-content) {
        padding-top: 0;
        .arco-result-subtitle {
            color: rgb(var(--gray-6));
        }
    }
</style>
